<template>
  <div class="terminal">
    <Card>
      <div class="top">
        <div class="device_name">
          <img src="" alt="" />
          <span class="terminal_title">边缘终端-ZNDY-01</span>
        </div>
      </div>
      <div class="info">
        <Row style="margin: 20px 0">
          <Col span="6"> <span>设备型号：</span><span>{{}}</span> </Col>
          <Col span="6"> <span>设备厂商：</span><span>{{}}</span> </Col>
          <Col span="6"> <span>软件版本：</span><span>{{}}</span> </Col>
          <Col span="6"> <span>硬件版本：</span><span>{{}}</span> </Col>
        </Row>
        <Row>
          <Col span="6"><span>设备状态：</span><span>{{}}</span></Col>
          <Col span="6"><span>设备IP：</span><span>{{}}</span></Col>
          <Col span="6"><span>创建时间：</span><span>{{}}</span></Col>
          <Col span="6"><span>更新时间：</span><span>{{}}</span></Col>
        </Row>
      </div>
    </Card>
    <Card style="margin-top: 25px">
      <div class="terminal_title label">远程维护</div>
      <div class="title">硬件维护</div>
      <div class="content">
        <Space :size="8">
          <Button type="primary" @click="onReset">远程复位</Button>
          <Button type="primary" @click="onRestart">设备重启</Button>
        </Space>
      </div>
      <div class="title">软件维护</div>
      <div class="content">
        <Space :size="8">
          <Upload :file-list="fileList" @change="onUpload">
            <Button type="primary" @click="flag = false">点击上传</Button>
          </Upload>

          <span class="tip"
            >上传软件升级文件进行远程升级维护，仅支持上传EXE\BIN\SH\BAT\ZIP\RAR文件。</span
          >
        </Space>
        <div class="process" v-if="flag">
          <div>软件升级包.BIN</div>
          <Row>
            <Col :span="22">
              <Progress
                :percent="percent"
                size="small"
                :status="status"
              ></Progress
            ></Col>
            <Col :span="2"><CloseCircleFilled @click="onCancel" /></Col>
          </Row>
        </div>
      </div>
    </Card>
    <Card style="margin-top: 25px">
      <div class="terminal_title label">维护记录</div>
      <div class="title">硬件维护</div>
      <BoTable
        :columns="columns"
        :request="_request"
        ref="tableRef"
        height="auto"
        :row-selection="rowSelection"
        row-key="id"
        hideSearch
      ></BoTable>
    </Card>
  </div>
</template>
<route lang="json">
{
  "name": "terminal-remote-control",
  "meta": {
    "title": "终端管理远程控制",
    "requireAuth": false
  }
}
</route>

<script setup lang="tsx">
import { computed, nextTick, ref, shallowRef } from 'vue';
import { CloseCircleFilled } from '@ant-design/icons-vue';
import { router } from '@boeyo/portal';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import {
  Button,
  Card,
  Col,
  Modal,
  Progress,
  Row,
  Space,
  Upload,
  message,
} from 'ant-design-vue';

const info = history.state;
console.log(info, 'info--------------');

const tableRef = ref();
const selectKeys = ref<any[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values, all) {
      selectKeys.value = values;
    },
  };
});

const _request = () => {
  return {
    total: 1,
    rows: [
      {
        code1: '1',
        code2: '1',
        code3: '1',
      },
    ],
  };
};

const fileList = ref([]);
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '维护类型',
    dataIndex: 'code1',
  },
  {
    title: '维护描述',
    dataIndex: 'code2',
  },
  {
    title: '维护时间',
    dataIndex: 'code3',
  },
]);

const onRestart = () => {
  Modal.confirm({
    title: '系统提示',
    content: `确定执行设备重启操作吗?`,
    onOk: async () => {
      message.success('操作成功!');
    },
  });
};
const onReset = () => {
  Modal.confirm({
    title: '系统提示',
    content: `确定执行设备复位操作吗?`,
    onOk: async () => {
      message.success('操作成功!');
    },
  });
};
const percent = ref(0);
const flag = ref(false);
const status = ref('');
let timer, interval;
const onUpload = async (e) => {
  percent.value = 0;
  status.value = '';
  flag.value = true;
  const formData = new FormData();
  formData.append('file', e.file);
  timer = setInterval(() => {
    percent.value++;
    if (percent.value >= 100) {
      percent.value = 0;
      flag.value = false;
      clearInterval(timer);
      timer = null;
    }
  }, 100);
  setTimeout(() => {
    //模拟接口返回
    const res = { code: 200, msg: '上传成功' };
    // const res = { code: 500, msg: '上传失败' };
    clearInterval(timer);
    timer = null;
    const incrementStep = (100 - percent.value) / 62;
    interval = setInterval(() => {
      percent.value += incrementStep;
      if (percent.value >= 100) {
        clearInterval(interval);
        interval = null;
        percent.value = 0;
        if (res.code === 200) {
          message.success('上传成功!');
          percent.value = 100;
          status.value = '';
        } else {
          percent.value = 100;
          status.value = 'exception';
          message.info('上传失败!');
        }
      }
    }, 16);
  }, 2000);
};
const onCancel = () => {
  flag.value = false;
  percent.value = 0;
  message.warning('用户取消上传!');
};
</script>

<style lang="scss" scoped>
.terminal {
  .top {
    display: flex;
    justify-content: space-between;
  }
  .info {
    padding-left: 25px;
  }
  .custom_dom {
    max-height: calc(100vh - 430px);
    padding: 10px;
    overflow-y: auto;
  }
  .terminal_title {
    font-size: 18px;
    font-weight: 700;
    &.label {
      font-size: 14px;
    }
  }
  .title {
    padding: 15px 10px;
    position: relative;
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      width: 5px;
      height: 14px;
      border-radius: 2.5px;
      background-color: #5a9cff;
    }
  }
  .tip {
    font-size: 12px;
    color: #51a4f1;
    display: block;
    width: 265px;
  }
  :deep(.ant-progress-text) {
    display: none;
  }
  :deep(.anticon-close-circle) {
    transform: translate(-22px, 3px);
    font-size: 16px;
    color: #a0a1a7;
    cursor: pointer;
  }
  .process {
    padding: 8px 0;
    width: 400px;
  }
}
</style>
